<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<body>
<h2>Hello World!</h2>

<!-- 聊天显示框 -->
<div class="content">
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="row clearfix">
                    <div class="col-md-6 column">
                        <h3 class="text-center text-info">
                            公聊信息显示窗口
                        </h3>
                        <c:forEach items="${PublicMSG}" var="msg">      <!--公聊显示框-->
                            <jsp:useBean id="now" class="java.util.Date" scope="page"/>
                            <div class="clearfloat">
                                <div class="author-name">
                                    <small class="chat-date">
                                        <fmt:formatDate value="${now}" pattern="yyyy:MM:dd hh:mm:dd" />
                                    </small>
                                </div>
                                <div class="left">
                                    <div class="chat-avatars"><img src="img/icon01.png" alt="头像"/></div>
                                    <div class="chat-message">
                                            ${msg}
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                    <div class="col-md-6 column">
                        <h3 class="text-center text-info">         <!--私聊显示框-->
                            私聊信息显示窗口
                        </h3>
                        <c:forEach items="${Personal}" var="msg">
                            <jsp:useBean id="now2" class="java.util.Date" scope="page"/>
                            <div class="clearfloat">
                                <div class="author-name">
                                    <small class="chat-date">
                                        <fmt:formatDate value="${now}" pattern="yyyy:MM:dd hh:mm:dd" />
                                    </small>
                                </div>
                                <div class="left">
                                    <div class="chat-avatars"><img src="img/icon01.png" alt="头像"/></div>
                                    <div class="chat-message">
                                            ${msg}
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
                <div class="row clearfix">
                    <div class="col-md-4">
                        <label>(非必要)私聊对象</label>     <!--获取私聊用户名-->
                        <input id="towho" type="text" class="form-control" placeholder="输入私聊用户名" />
                        <!-- towho对应要私聊的用户名 -->
                    </div>
                    <div class="col-md-12 column">
                        <label>请输入聊天内容:</label>      <!--输入聊天内容得文本域-->
                        <textarea id="context" rows="5" class="form-control" placeholder="输入想说的话"></textarea>
                        <!-- context为内容 -->
                        <button id="SendMsg"  class="btn btn-info btn-fill ">发送信息</button>
                        <!-- 给按钮绑定AJAX -->

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 下面是悬浮对话框 -->
<div class="chatContainer">              <!--显示在线人数用的悬浮框-->
    <div class="chatBtn">
        <i class="pe-7s-users"></i>
    </div>
    <div class="chatBox" ref="chatBox">
        <div class="chatBox-head">
            <div class="chatBox-head-one">
                在线用户列表
                <div class="chat-close" style="margin: 10px 10px 0 0;font-size: 14px">关闭</div>
            </div>
            <div class="chatBox-head-two">
                <div class="chat-return">返回</div>
                <div class="chat-people">
                    <div class="ChatInfoHead">
                        <img src="" alt="头像"/>
                    </div>
                    <div class="ChatInfoName">这是用户的名字，看看名字到底能有多长</div>
                </div>
                <div class="chat-close">关闭</div>
            </div>
        </div>
        <div class="chatBox-info">
            <div class="chatBox-list" ref="chatBoxlist">                 <!--这里显示的是在线用户-->
                <c:forEach items="${OnlineUsers}" var="user">
                    <div class="chat-list-people" id="ChatUser${user.ID}">
                        <div><img src="img/icon01.png" alt="头像"/></div>
                        <div class="chat-name">
                            <p>用户${user.getUserName()}</p>                   <!-- 显示在线用户的用户名 -->
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
    </div>
</div>
<!--字节跳动jquery压缩版引用地址: （速度快推荐！）-->
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $('#SendMsg').click(function(){            //发送消息请求
        $.post("${pageContext.request.contextPath}/ChatServlet",
            {
                "context":$('#context').val(),
                "towho":$('#towho').val()
            },
            function(result){
                alert("success");
            });

        alert('FUCKyou');
    });
</script>

</body>
</html>
